<!-- 折线图 -->
<template>
	<view class="charts-box">
		<qiun-data-charts :reshow="!!seriesData.length" canvas2d type="line" :opts="opts" :chartData="chartData" />
	</view>
</template>

<script>
	import qiunDataCharts from "../qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"
	export default {
		components: {
			qiunDataCharts
		},
		name: "line",
		props: {
			echartsH5: {
				type: Boolean,
				default: true
			},
			echartsApp: {
				type: Boolean,
				default: true
			},
			//curve straight
			lineTypes: {
				type: String,
				default: 'straight'
			},
			//lineActiveType 激活指示点类型，可选值："none"不启用激活指示点,"hollow"空心点模式,"solid"实心点模式
			lineActiveType: {
				type: String,
				default: 'hollow'
			},
			//渐变色类型，可选值 "none"关闭渐变色，"custom"自定义渐变色。使用自定义渐变色时请赋值serie.linearColor作为颜色值
			linearType: {
				type: String,
				default: 'none'
			},
			lineWidth: {
				type: Number,
				default: 2
			},
			isShow: {
				type: Boolean,
				default: true
			},
			heightS: {
				type: Number,
				default: 600
			},
			//x轴标题是否旋转
			xRotateLabel: {
				type: Boolean,
				default: false
			},
			splitNumber: {
				type: Number,
				default: 5
			},
			max: {
				type: Number,
				default: 800
			},
			xRotateAngle: {
				type: Number,
				default: 0
			},
			colors: {
				type: Array,
				default: () => ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", '#3CA272', '#FC8452', '#9A60B4',
					'#ea7ccc'
				]
			},
			linearColor: {
				type: Array,
				default: () => {
					return [
						[
							[0, "#1890FF"],
							[0.5, "#00D1ED"],
							[1, "#90F489"]
						],
						[
							[0, "#91CB74"],
							[0.5, "#aaffff"],
							[1, "#55ffff"]
						],
						[
							[0, "#FAC858"],
							[0.5, "#FFC2B2"],
							[1, "#FA7D8D"]
						],
						[
							[0, "#EE6666"],
							[0.5, "#ffc635"],
							[1, "#f0fa7e"]
						],
						[
							[0, "#73C0DE"],
							[0.5, "#3a99ff"],
							[1, "#5863fa"]
						],
						[
							[0, "#3CA272"],
							[0.5, "#00d400"],
							[1, "#0afae6"]
						],
						[
							[0, "#FC8452"],
							[0.5, "#ffac59"],
							[1, "#fa5514"]
						],
						[
							[0, "#9A60B4"],
							[0.5, "#e3abff"],
							[1, "#f3e5fa"]
						],
					]
				}
			},
			isShadow: {
				type: Boolean,
				default: false
			},
			setShadow: {
				type: Array,
				default: () => {
					return [
						[3, 8, 10, "#1890FF"],
						[3, 8, 10, "#91CB74"],
						[3, 8, 10, "#FAC858"],
						[3, 8, 10, "#EE6666"],
						[3, 8, 10, "#73C0DE"],
						[3, 8, 10, "#3CA272"],
						[3, 8, 10, "#FC8452"],
						[3, 8, 10, "#9A60B4"],
					]
				}
			},
			categories: {
				type: Array,
				default: () => ["英语", "政治", "专业一", "专业二", "总分"]
			},
			seriesData: {
				type: Array,
				default: () => [{
						name: "2023",
						data: [35, 8, 25, 37, 2]
					},
					{
						name: "2022",
						data: [70, 100, 44, 68, 0]
					},
					{
						name: "2021",
						data: [100, 80, 95, 112, 132]
					},
					{
						name: "2020",
						data: [100, 95, 150, 110, 222]
					}
				]
			},
		},
		data() {
			return {
				chartData: {},
				opts: {},
			};
		},
		methods: {
			getServerData() {
				this.opts = {
					color: this.colors,
					padding: [15, 10, 0, 15],
					dataLabel: false,
					dataPointShape: true, //是否显示数据点的图形标识
					dataPointShapeType: 'solid', //图形标识点显示类型，可选值：'solid'实心,'hollow'空心
					enableScroll: false,
					legend: {
						show: this.isShow,
						position: 'top',
						fontSize: '11',
						fontColor: '#333',
						float: 'center',
					},
					xAxis: {
						disableGrid: true,
						marginTop: 2,
						lineHeight: '30',
						calibration: true, //坐标轴刻度线
						fontColor: '#333',
						fontSize: 11,
						rotateLabel: this.xRotateLabel, //【旋转】数据点（刻度点）文字
						rotateAngle: this.xRotateAngle, //开启上面旋转功能后，文字旋转的角度，取值范围(-90至90)
					},
					yAxis: {
						gridType: "dash", //solid，dash
						dashLength: 2,
						splitNumber: this.splitNumber,
						data: [{
							min: 0,
							max: this.max,
							fontSize: 11,
							fontColor: '#333',
							calibration: true,
						}]
					},
					extra: {
						line: {
							type: this.lineTypes,
							width: this.lineWidth,
							activeType: this.lineActiveType,
							linearType: this.linearType,
							onShadow: this.isShadow,
							activeBgColor: "#333",
							activeBgOpacity: 0.08,
							seriesGap: 3,
							barBorderCircle: true,
						},
					}
				};
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					if (this.isShadow) {
						this.seriesData.forEach((e, i) => {
							e['setShadow'] = this.setShadow[i];
						})
					}
					if (this.linearType === 'custom') {
						this.seriesData.forEach((e, i) => {
							e['linearColor'] = this.linearColor[i];
						})
					}
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: this.categories,
						series: this.seriesData
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 200);
			},
		}
	};
</script>

<style scoped>
	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		width: 100%;
		height: 400rpx;
	}
</style>